<template>
	<el-dialog :close-on-click-modal="false" :title="`${mode === 'add' ? '新增' : '修改'}作业记录`" width="600px" v-model="visible" @confirm="confirm"
		@cancel="visible = false" @close="closeDialog">
		<div class="formData">
			<el-form :model="formData" ref="ruleForm" label-width="100px" :rules="rules">
				<el-form-item label="拖轮" prop="tugId">
				  <Select placeholder="请选择拖轮" :selectData="selects.tugList" v-model:value="formData.tugId" v-model:label="formData.tugNo"/>
				</el-form-item>
				<el-form-item label="作业项目" prop="workItemId">
				  <Select placeholder="请选择作业项目" :selectData="selects.workItemList" v-model:value="formData.workItemId" v-model:label="formData.workItemName"/>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="closeDialog">取消</el-button>
				<el-button type="primary" @click="confirm">
					确认
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		defineEmits,
		defineExpose,
		nextTick
	} from "vue";
	import {
		ElMessage,
		ElMessageBox,
		ElNotification
	} from "element-plus";
	import Select from '@/components/Select/index.vue';
	import tugApi from '@/api/basicData/tug';
	import recordApi from '@/api/plan/plan/recordIndex'
	import api from '@/api/plan/plan/index';
	import workItemApi from '@/api/basicData/workItem';
	const emit = defineEmits(['callback'])

	const selects = ref({
		tugList:[],
		workItemList:[]
	})

	const visible = ref(false)
	const mode = ref('add')
	const row = ref({})
	const fileList = ref([])
	const formData = ref({
      tugId: '',
      tugNo: '',
      workItemId: '',
      workItemName: '',
	  planId:''
    })
	const ruleForm = ref({})

	const rules = ref({

		tugId: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
		workItemId: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
	})
	// 展示
	const show = params => {
		visible.value = true
		mode.value = params?.mode || 'add'
		row.value = params.row
		if (mode.value === 'edit') {
			editInit()
		}else{
		  formData.value = {
			tugId: '',
			tugNo: '',
			workItemId: '',
			workItemName: '',
			beginTime:'',
			endTime:'',
			status:0,
			planId:params.row.id,
			customerId:params.row.customerId,
			customerName:params.row.customerName,
			shipId:params.row.shipId,
			shipName:params.row.shipName,
			tradeType:params.row.tradeType,
			shipKindCode:params.row.shipKindCode,
			shipKindName:params.row.shipKindName,
			portAreaCode:params.row.portAreaCode,
			portAreaName:params.row.portAreaName,
		  }
	  }
	  getSelectList()
	}
	// 编辑
	const editInit = async () => {
		const {
			data
		} = await recordApi.getDetailById({
			id: row.value.id
		})
		formData.value = {
			...data
		}
	}
	// 确认
	const confirm = () => {
		ruleForm.value.validate(valid => {
			if (valid) {
				recordApi.save(formData.value).then(res => {
				  if (res.code == '200') {
				    ElMessage.success('保存成功')
				    visible.value = false;
				    emit("callback");
				  } else {
				    ElMessage.error(res.msg)
				  }
				})
			} else {
				ElMessage.warning('请完善表单信息！')
			}
		})
	}

	// 重置
	const closeDialog = () => {
		nextTick(() => {
			visible.value = false
			ruleForm.value.resetFields()
		})
	}
	defineExpose({
		show
	})
	const getSelectList = () => {
		selects.value.tugList = []
		selects.value.workItemList = []
		var selArr = []
		var planObj = {}
		api.getDetailById({id:row.value.planId ? row.value.planId : row.value.id}).then(plan=>{
			planObj = plan.data
			//将已安排的拖轮id统计出来
			selArr = planObj.children.map(v => v.tugId)
		}).then(_=>{
			tugApi.getList({startPage:1,pageSize:100,portAreaCode:planObj.portAreaCode}).then(res=>{
				if(res.data.records.length > 0){
					var par = {}
					res.data.records.forEach(item=>{
						par = {label:item.tugNo,value:item.id}
						//判断是否是已安排的拖轮
						if(selArr.indexOf(item.id) > -1){
							par.disabled = true;
						}
						selects.value.tugList.push(par)
					})
				}
			})
		})
		workItemApi.getList({startPage:1,pageSize:100,workTypeCode:1}).then(res=>{
			var str = '协助离泊';
			if(row.value.inOut == 'J') str = '协助靠泊'
			if(res.data.records.length > 0){
				res.data.records.forEach(item=>{
					if(item.workItem == str){
						formData.value.workItemId = item.id
						formData.value.workItemName = item.workItem
					}
					selects.value.workItemList.push({label:item.workItem,value:item.id})
				})
			}
		})
	}
</script>